<template>
<loading v-if="loading"></loading>
<div class="clearfix" style="margin: 60px 0" v-else>
  <div class="fl view-box">
    <div class="input-group">
      <label>菜单名称：</label>
      <div class="input-group-box"><el-input disabled v-model="check.name"></el-input></div>
    </div>
    <div class="input-group">
      <label>路径：</label>
      <div class="input-group-box">
        <el-input placeholder="路径url" disabled v-model="check.url"></el-input>
      </div>
    </div>
    <div class="input-group" v-if="check.icon!==''">
      <label>icon：</label>
      <div class="input-group-box view-icon-box">
        <span :class="check.icon" class="view-icon"></span>
      </div>
    </div>
    <div class="input-group">
      <label>页面级功能：</label>
      <div class="input-group-box">
        <span class="funItem" v-html="item.name" :key="item.id" v-for="item in check.page" @click="fundetail(item.id)"></span>
      </div>
    </div>
    <div class="input-group">
      <label>行级功能：</label>
      <div class="input-group-box">
        <span class="funItem" v-html="item.name" :key="item.id" v-for="item in check.row" @click="fundetail(item.id)"></span>
      </div>
    </div>
  </div>
  <div class="fl view-box">
    <div class="input-group">
      <label>权限名称：</label>
      <div class="input-group-box"><el-input placeholder="权限名称" v-model="detail.title"></el-input></div>
    </div>
    <div class="input-group">
      <label>标识：</label>
      <div class="input-group-box">
        <el-input placeholder="标识" v-model="detail.unique_key"></el-input>
      </div>
    </div>
    <div class="input-group">
      <label>路径：</label>
      <div class="input-group-box">
        <el-input placeholder="路径" v-model="detail.action_uri"></el-input>
      </div>
    </div>
    <div class="input-group">
      <label>icon：</label>
      <div class="input-group-box">
        <div class="input-group-box">
        <el-radio-group v-model="detail.icon">
          <el-radio :label="item" :key="index" v-for="(item, index) in funIcon">
            <i :class="item"></i>
          </el-radio>
        </el-radio-group>
      </div>
      </div>
    </div>
    <div class="input-group">
      <label>操作级别：</label>
      <div class="input-group-box">
        <div class="input-group-box">
        <el-radio-group  v-model="detail.level">
          <el-radio label="ROW">行级</el-radio>
          <el-radio label="PAGE">页面级</el-radio>
        </el-radio-group>
      </div>
      </div>
    </div>
    <div class="input-group input-group-btn">
      <span class="btn-footer">
        <el-button :disabled="isUpdate">取消</el-button>
        <el-button type="danger" :disabled="isUpdate" @click="delfun(detail.id)">删除</el-button>
        <el-button type="primary" :disabled="isUpdate" @click="updatefun(detail.id)">保存修改</el-button>
      </span>
    </div>
  </div>
</div>
</template>
<script>
import config from '../../utils/config'
import crypt from '../../utils/crypto-helper-pkcs7'
import axios from 'axios'
import icon from '../../utils/icon.js'
import loading from '../../components/loading'
export default {
  data () {
    return {
      mid: '',
      check: {
        name: '',
        url: '',
        icon: '',
        page: {},
        row: {}
      },
      detail: {
        id: '',
        title: '',
        unique_key: '',
        icon: '',
        action_uri: '',
        level: ''
      },
      isUpdate: true,
      loading: true
    }
  },
  components: {
    loading
  },
  created () {
    this.mid = this.$route.params.mid
    this.funIcon = icon.funIcon
    var param = {
      id: this.mid
    }
    var paramjson = JSON.stringify(param)
    var params = crypt.encrypt(paramjson)
    axios.get(config.domain + config.urls.checkmenu + '?param=' + params)
    .then(res => {
      var response = res.data
      if (response.errcode === 200) {
        var responseData = response.data
        this.check.name = responseData.title
        this.check.url = responseData.uri
        this.check.icon = responseData.icon
        this.loading = false
        this.getfun()
      } else if (response.errcode === 200103) {
        this.$confirm('登录过期，请重新登录')
        .then(_ => {
          window.sessionStorage.clear()
          this.$router.push('/admin/login')
        })
        .catch(_ => {})
      }
    })
    .catch(error => {
      console.log(error)
    })
  },
  methods: {
    getfun () {
      var param = {
        menu_id: this.mid
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.funlist + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          var responseData = response.data
          this.check.row = responseData.row
          this.check.page = responseData.page
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    fundetail (id) {
      var param = {
        id: id
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.fundetail + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.isUpdate = false
          var responseData = response.data
          this.detail.id = responseData.id
          this.detail.title = responseData.name
          this.detail.unique_key = responseData.unique_key
          this.detail.icon = responseData.icon
          this.detail.action_uri = responseData.action_uri
          this.detail.level = responseData.level
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(_ => {})
    },
    updatefun (id) {
      var param = {
        id: id,
        name: this.detail.title,
        unique_key: this.detail.unique_key,
        icon: this.detail.icon,
        action_uri: this.detail.action_uri,
        level: this.detail.level
      }
      var paramjson = JSON.stringify(param)
      // console.log(paramjson)
      var params = crypt.encrypt(paramjson)
      this.$confirm('确认要修改此信息吗？')
      .then(_ => {
        axios.get(config.domain + config.urls.funupdate + '?param=' + params)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.authVisible = false
            this.$notify({
              title: '成功',
              message: '功能修改成功',
              type: 'success',
              duration: 1500
            })
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          } else {
            this.$notify({
              title: '失败',
              message: '功能修改失败',
              type: 'error',
              duration: 1500
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(error => {
        console.log(error)
      })
    },
    delfun (id) {
      var param = {
        id: id
      }
      var paramjson = JSON.stringify(param)
      console.log(paramjson)
      var params = crypt.encrypt(paramjson)
      this.$confirm('确认要删除此条信息吗？')
      .then(_ => {
        axios.get(config.domain + config.urls.pdel + '?param=' + params)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 1500
            })
            this.detail.id = ''
            this.detail.title = ''
            this.detail.unique_key = ''
            this.detail.icon = ''
            this.detail.action_uri = ''
            this.detail.level = ''
            this.isUpdate = true
            this.getfun()
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          } else {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 1500
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(_ => {})
    }
  }
}
</script>
<style>
.view-box {
  width: 50%;
  box-sizing: border-box;
  padding: 20px 50px;
  min-height: 550px;
}
.view-box:first-child{
  border-right: 1px solid #cddce5;
}
.view-icon {
  position: absolute;
  color: #3c8dbc;
  font-size: 18px;
  top: 9px;
}
.view-icon-box {
  position: relative
}
.funItem {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  margin-top: 4px;
  border: 1px solid rgba(32,160,255,.2);
  border-radius: 6px;
  margin-right: 15px;
  background-color: rgba(32,160,255,.1);
  color: #20a0ff;
  cursor: pointer;
}
.funItem:hover {
  background: rgba(32,160,255,.3);
}
.input-group-btn {
  position: relative;
}
.btn-footer {
  position: absolute;
  right: 10px;
}
</style>

